<template>
  <div>
    <el-container>
        <!-- 侧边栏 -->
      <el-aside width="150px">
        <div class="title">
          <img src="../assets/images/logo.png" />
          <h1>云管铺</h1>
        </div>
        <el-menu
          default-active="workbench"
          @open="handleOpen"
          @close="handleClose"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-submenu index="workbench">
            <template slot="title">
              <i class="iconfont icon-shouye1"></i>
              <span>首页</span>
            </template>
              <el-menu-item index="workbench">
                  <template>
                    <span>工作台</span>
                  </template>
              </el-menu-item>
          </el-submenu>
          <el-submenu index="store">
            <template slot="title">
              <i class="iconfont icon-shangpu"></i>
              <span>商铺</span>
            </template>
              <el-menu-item index="store">
                  <template>
                    <span>工作台</span>
                  </template>
              </el-menu-item>
          </el-submenu>
          <el-submenu index="money">
            <template slot="title">
              <i class="iconfont icon-caiwu-xian"></i>
              <span>财务</span>
            </template>
              <el-menu-item index="money">
                  <template>
                    <span>工作台</span>
                  </template>
              </el-menu-item>
          </el-submenu>
          <el-submenu index="admin">
            <template slot="title">
              <i class="iconfont icon-administration"></i>
              <span>行政</span>
            </template>
              <el-menu-item index="admin">
                  <template>
                    <span>工作台</span>
                  </template>
              </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
          <!-- 顶栏 -->
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/workbench' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>工作台</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="right">
                <span>至尊版</span>
                <span class="iconfont icon-icon--"></span>
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                <span class="userName">用户名</span>
            </div>
        </el-header>
        <el-main>
            <!-- 内容区 -->
            <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {};
  },
};
</script>

<style scoped lang='less'>
.el-aside {
  background-color: #001529;
  color: #fff;
  text-align: center;
  min-height: 100vh;
  .title {
    display: flex;
    margin-top: 10px;
    img {
      margin-left: auto;
      display: block;
      width: 25%;
      height: 25%;
    }
    h1 {
      line-height: 0px;
      font-size: 18px;
      font-weight: 300;
      margin-right: 30px;
    }
  }
  .el-menu{
    overflow: hidden;
    .el-submenu__title{
     span{
         margin-right: 30px;
         font-size: 12px;
     }
     .iconfont{
         color: #fff;
         margin-right: 10px;
     }
     .icon-shangpu{
         font-size: 12px;
     }
    } 
    .el-menu-item{
        text-align: left;
        line-height: 10px;
        margin-left: 10px;
        height: 20px;
        font-size: 12px;
    }
  }
  
}
.el-header{
    border-bottom: 1px solid #dbdbdd;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #000;
    span{
        line-height: 60px;
    }
    .iconfont{
        color: #000;
    }
    .el-avatar{
        width: 25px;
        height: 25px;
    }
    .right{
        .icon-icon--{
            font-size: 20px;
        }
    }
}
.el-main {
  background-color: #fff;
}
</style>